<template>
  <div>
    <el-autocomplete
      v-model="name"
      :trigger-on-focus="true"
      ref="searchSelect"
      @clear="Clear()"
      class="wid300 main_comm"
      :fetch-suggestions="
        (queryString, cb) => {
          querySearchAsync(queryString, cb);
        }
      "
      placeholder="选择商品"
      clearable
      :highlight-first-item="true"
      value-key="name"
      @select="
        (item) => {
          handleSelect(item);
        }
      "
      ><template v-if="url == 'sync'" slot-scope="{ item }">
        {{ item.name }}
      </template>
      <template v-if="url == 'async'" slot-scope="{ item }">
        <div class="main_name">
          <span> {{ item.goods.name }}【{{ item.spu_name.title }}】 </span>
          <span class="main_addr">{{ item.goods_spu_code }}</span>
        </div>
      </template></el-autocomplete
    >
  </div>
</template>

<script>
import { allocation_getGoods } from "@/api/warehouse/warehouseAllocation";
import { goods_getGoodsSpu } from "@/api/currency";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
export default {
  props: {
    form: {
      type: Object,
      default: function () {
        return {};
      },
    },
    type: {
      type: Number,
    },
    url: {
      type: String,
    },
  },
  data() {
    return {
      name: "",
    };
  },
  methods: {
    querySearchAsync(queryString, cb) {
      if (queryString.trim() == "") {
        cb([]);
        return;
      }
      let data = Object.assign(
        apiUrl().name,
        { name: queryString.trim() }
      );
      let func = null;
      switch (this.url) {
        case "sync":
          func = allocation_getGoods;
          break;
        case "async":
          func = goods_getGoodsSpu;
          break;
        default:
          func = allocation_getGoods;
          break;
      }
      func(data).then((res) => {
        if (res.errcode == 0) {
          if (this.url == "async") {
            res.data.goods.map((e) => {
              e.name = e.goods.name + "【" + e.spu_unit.title + "】";
            });
          }
          var results = res.data.goods;
          if (this.$refs.searchSelect) {
            this.$refs.searchSelect.activated = true;
          }

          let array1 = [];
          switch (this.type) {
            case 1:
              array1 = results.filter((value, index, array) => {
                return value.goods_id != this.form.storage_goods_id;
              });
              cb(array1);
              break;
            case 2:
              array1 = results.filter((value, index, array) => {
                return value.goods_id != this.form.goods_id;
              });
              cb(array1);
              break;
            default:
              cb(results);
              break;
          }
        } else {
          this.$message.error(res.errmsg);
          cb([]);
        }
      });
    },
    handleSelect(item) {
      this.name = item.name;
      this.$emit("sendValue", item);
    },
    Clear() {
      this.$emit("clear");
    },
    // blur() {
    //   this.$emit("sendValue", this.name);
    // },
  },
};
</script>

<style lang="scss" scoped>
.main_name {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 0;
  height: 50px;

  .main_addr {
    color: #999;
  }

  span {
    line-height: 20px;
    display: inline;
    height: 20px;
  }
}
</style>